<div class="KeyForm">
    <div class="ui form">
        <div class="ui info message" *ngIf="newKey.type == 'ssh'">
            {{ 'keys_ssh_key_help' | translate }} <a href="https://ovh.github.io/cds/docs/components/worker/key/install/">Worker Install Key</a>
        </div>
        <div class="ui info message" *ngIf="newKey.type == 'pgp'">
            {{ 'keys_pgp_key_help' | translate }} <a href="https://ovh.github.io/cds/docs/components/worker/key/install/">Worker Install Key</a>
        </div>
        <div class="fields">
            <div class="seven wide field">
                <label>{{ 'keys_name' | translate}}</label>
                <div class="ui labeled input">
                    <div class="ui label">{{prefix}}</div>
                    <input type="text" name="name" [(ngModel)]="newKey.name">
                </div>
            </div>
            <div class="seven wide field">
                <label>{{ 'keys_type' | translate }}</label>
                <ng-container *ngIf="keyTypes">
                    <sui-select class="selection"
                                name="type"
                                [(ngModel)]="newKey.type"
                                [options]="keyTypes"
                                [isSearchable]="true"
                                #selectKeyType>
                        <sui-select-option *ngFor="let t of selectKeyType.filteredOptions" [value]="t">
                        </sui-select-option>
                    </sui-select>
                </ng-container>
            </div>
            <div class="two wide right aligned field">
                <button class="ui green button" type="button" [class.loading]="loading" [disabled]="loading || newKey.name === ''" (click)="addKey()">{{ 'btn_add' | translate }}</button>
            </div>
        </div>
    </div>
</div>
